<template>
  <div class="add-supervision-information-container">
    <div>
      <div class="my-form">
        <div class="my-form-item">
          <div class="my-form-item-label">课程名称</div>
          <div class="my-form-item-content" v-for="index in data" :key="index">
            <div>{{ pjEvalactor.coursename }}</div>
            <div>被评价教员</div>
            <div>{{ pjEvalactor.teacherid }}</div>
          </div>
        </div>
        <div class="my-form-item"></div>
        <div class="my-form-item">
          <div class="my-form-item-label">评价标准</div>
          <div class="my-form-item-content">
            <ul>
              <li>
                <span>评价标准</span>
                <span>A</span>
                <span>B</span>
                <span>e</span>
                <span>D</span>
              </li>
              <li>
                <span>1.教学内容</span>
                <span></span>
                <span></span>
                <span></span>
                <span></span>
              </li>
              <li v-for="(item, index) in checkboxList1" :key="index">
                <span>{{ item.name }} </span>
                <span>
                  <el-checkbox v-model="item.checked1"></el-checkbox
                ></span>
                <span>
                  <el-checkbox v-model="item.checked2"></el-checkbox
                ></span>
                <span>
                  <el-checkbox v-model="item.checked3"></el-checkbox
                ></span>
                <span>
                  <el-checkbox v-model="item.checked4"></el-checkbox
                ></span>
              </li>
              <li>
                <span>2.教学内容</span>
                <span></span>
                <span></span>
                <span></span>
                <span></span>
              </li>
              <li v-for="(item, index) in checkboxList2" :key="index">
                <span>{{ item.name }} </span>
                <span>
                  <el-checkbox v-model="item.checked1"></el-checkbox
                ></span>
                <span>
                  <el-checkbox v-model="item.checked2"></el-checkbox
                ></span>
                <span>
                  <el-checkbox v-model="item.checked3"></el-checkbox
                ></span>
                <span>
                  <el-checkbox v-model="item.checked4"></el-checkbox
                ></span>
              </li>
            </ul>
          </div>
        </div>
        <div class="my-form-item">
          <div class="my-form-item-label">评价等级</div>
          <div class="my-form-item-content">
            <div>
              <el-select
                size="mini"
                class="evaluate-level"
                style="width: 89px"
                v-model="evaluation_grade"
                popper-class="add-supervision-information-green-popper"
              >
                <el-option
                  v-for="(item, index) in evaluation_grades"
                  :key="index"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </div>
            <div>评定分数</div>
            <div>
              <el-input
                style="width: 110px"
                v-model="evaluation_score"
              ></el-input>
            </div>
          </div>
        </div>
        <div class="my-form-item">
          <div class="my-form-item-label">意见和建议</div>
          <div class="my-form-item-content">
            <div>
              <el-input
                type="textarea"
                :rows="4"
                style="width: 1441px"
                v-model="expert_reviews"
              ></el-input>
            </div>
          </div>
        </div>
      </div>
      <div class="button-group">
        <!-- <div>提交</div> -->
        <div>保存</div>
        <div>取消</div>
      </div>
    </div>
    <el-dialog
      title="手动录入填写上课信息"
      :visible.sync="showManualEntryDialog"
      width="1185px"
      class="manual-entry-container"
    >
      <div>
        <el-row>
          <el-col :span="12">
            <div>课程名称</div>
            <div>
              <el-input
                v-model="class_name"
                style="width: 234px"
                placeholder="请输入课程名称"
              ></el-input>
            </div>
          </el-col>
          <el-col :span="12">
            <div>上课教员</div>
            <div>
              <el-input v-model="class_teacher" style="width: 234px"></el-input>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <div>听课节次</div>
            <div>
              <el-select style="width: 90px" v-model="class_frequency">
                <el-option
                  v-for="(item, index) in class_frequencys"
                  :key="index"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </div>
          </el-col>
          <el-col :span="12">
            <div>教学班</div>
            <div>
              <el-input v-model="class_num" style="width: 234px"></el-input>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <div>场 地</div>
            <div>
              <el-input v-model="class_adrr" style="width: 234px"></el-input>
            </div>
          </el-col>
          <el-col :span="12">
            <div>教学班</div>
            <div></div>
          </el-col>
        </el-row>
      </div>
      <span slot="footer" class="dialog-footer">
        <button @click="showManualEntryDialog = false">保存</button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { supstudentlist } from "@/api/student/student";

export default {
  name: "addsupervisioninformations",
  data() {
    return {
      pjEvalactor: {},
      studentid: "200107",
      checkboxList1: [
        {
          name: "1.[教学准备]教学目标与预期具体明确",
          checked1: false,
          checked2: false,
          checked3: false,
          checked4: false
        },
        {
          name: " 2.[教学准备]教学目标与预期具体明确",
          checked1: false,
          checked2: false,
          checked3: false,
          checked4: false
        },
        {
          name: "3.[教学准备]教学目标与预期具体明确",
          checked1: false,
          checked2: false,
          checked3: false,
          checked4: false
        }
      ],
      checkboxList2: [
        {
          name: "1.[教学准备]教学目标与预期具体明确",
          checked1: false,
          checked2: false,
          checked3: false,
          checked4: false
        },
        {
          name: " 2.[教学准备]教学目标与预期具体明确",
          checked1: false,
          checked2: false,
          checked3: false,
          checked4: false
        },
        {
          name: "3.[教学准备]教学目标与预期具体明确",
          checked1: false,
          checked2: false,
          checked3: false,
          checked4: false
        }
      ],
      value1: new Date(),
      expert_reviews: "",
      evaluation_score: "",
      evaluation_grade: "C",
      evaluation_grades: [
        { label: "A", value: "A" },
        { label: "B", value: "B" },
        { label: "C", value: "C" },
        { label: "D", value: "D" }
      ],
      class_sessions: "1-2",
      class_sessions_list: [{ label: "1-2", value: "1-2" }],
      showManualEntryDialog: false,
      class_name: "",
      class_teacher: "李教员",
      class_num: "教学班一",
      class_adrr: "场地一",
      class_frequency: "2",
      class_frequencys: [{ label: "2", value: "2" }]
    };
  },

  mounted() {
    this.supstudent();
  },
  methods: {
    //网上评教
    supstudent() {
      return new Promise(() => {
        //教员查询到所有数据
        supstudentlist(this.studentid).then(res => {
          console.log(res, "res");
        });
      });
    }
  }
};
</script>
<style lang="less" scoped>
.add-supervision-information-container {
  .evaluate-level {
    .el-input__inner {
      border: 1px solid rgba(2, 200, 108, 1);
      color: rgba(2, 200, 108, 1);
      background: rgba(241, 255, 248, 1);
      .el-icon-arrow-up:before {
        content: "\E6E1";
      }
    }

    .el-select .el-input.is-focus .el-input__inner {
      border-color: rgba(2, 200, 108, 1);
    }

    .el-select:focus .el-input__inner,
    .el-select:hover .el-input__inner {
      border-color: rgba(2, 200, 108, 1);
    }

    .el-input .el-select__caret {
      color: rgba(2, 200, 108, 1);
    }

    .el-select-dropdown__item.selected {
      color: rgba(2, 200, 108, 1);
    }
    .el-input.is-focus .el-input__inner {
      border-color: rgba(2, 200, 108, 1);
    }
  }
  .el-textarea__inner {
    resize: none;
  }
  .manual-entry-container {
    .el-dialog__body {
      > div {
        width: 1014px;
        border: 1px solid rgba(0, 76, 167, 0.8);
        border-radius: 6px;
        margin: 0 auto;
        > div {
          border-bottom: 1px solid rgba(0, 76, 167, 0.39);
          &:last-child {
            border-bottom: none;
          }
          > div {
            display: flex;
            > div {
              height: 96px;
              display: flex;
              align-items: center;
              justify-content: center;
              &:nth-child(1) {
                width: 220px;
                text-align: center;
                font-size: 16px;
                font-weight: bold;
                color: #004ca7;
                background: rgba(77, 129, 192, 0.1);
              }
              &:nth-child(2) {
                padding-left: 19px;
              }
            }
          }
        }
      }
    }
    .el-dialog__footer {
      padding-bottom: 43px;
    }
    .dialog-footer {
      > button {
        width: 91px;
        height: 36px;
        background: #fff6ef;
        border: 1px solid #f3b815;
        border-radius: 6px;
        background: rgba(255, 246, 239, 1);
        font-size: 18px;
        color: #f3b815;
      }
    }
  }
}
.add-supervision-information-green-popper {
  .el-select-dropdown__item {
    color: rgba(2, 200, 108, 1);
  }
  .el-select-dropdown__item.selected {
    color: rgba(2, 200, 108, 1);
    font-weight: 700;
  }
}
</style>
<style scoped lang="less">
.add-supervision-information-container {
  .my-form {
    width: 1737px;
    height: 826px;
    border: 1px solid rgba(0, 76, 167, 0.8);
    margin: 57px auto 19px;
    .my-form-item {
      border-bottom: 1px solid rgba(0, 76, 167, 0.39);
      > div {
        display: table-cell;
        min-height: 54px;
        vertical-align: middle;
      }
      .my-form-item-label {
        font-size: 16px;
        font-weight: bold;
        color: #004ca7;
        background: rgba(77, 129, 192, 0.1);
        width: 239px;
        text-align: center;
      }
      .my-form-item-content {
        width: 1497px;
        font-size: 14px;
        color: #004ca7;
        border-left: 1px solid rgba(0, 76, 167, 0.39);
      }
      &:nth-child(1) {
        .my-form-item-content {
          > div {
            height: 69px;
            display: inline-block;
            vertical-align: middle;
            padding-top: 23px;
            &:nth-child(1) {
              width: 630px;
              text-align: center;
            }
            &:nth-child(2) {
              width: 240px;
              font-size: 16px;
              font-weight: bold;
              color: #004ca7;
              background: rgba(77, 129, 192, 0.1);
              text-align: center;
            }
            &:nth-child(3) {
              width: 600px;
              text-align: center;
            }
            &:nth-child(4) {
              width: 240px;
              font-size: 16px;
              font-weight: bold;
              color: #004ca7;
              background: rgba(77, 129, 192, 0.1);
              text-align: center;
            }
            &:nth-child(5) {
              padding-left: 20px;
            }
          }
        }
      }
      &:nth-child(2) {
        .my-form-item-content {
          > div {
            height: 56px;
            vertical-align: middle;
            padding-top: 10px;
            padding-left: 13px;
            > span {
              font-size: 16px;
              font-weight: bold;
              line-height: 39px;
              margin-right: 86px;
              color: #004ca7;
              > span {
                font-weight: 400;
              }
            }
          }
        }
      }
      &:nth-child(3) {
        .my-form-item-content {
          > ul {
            list-style: none;
            > li {
              border-bottom: 1px solid rgba(0, 76, 167, 0.39);
              &:nth-child(1) {
                background: rgba(77, 129, 192, 0.1);
                > span {
                  font-weight: bold;
                }
              }
              &:last-child {
                border-bottom: none;
              }
              > span {
                display: inline-block;
                height: 55px;
                text-align: center;
                padding-top: 18px;
                width: 233px;
                vertical-align: middle;
                &:nth-child(1) {
                  width: 563px;
                }
                &:nth-child(2) {
                  border-left: 1px solid rgba(0, 76, 167, 0.39);
                  border-right: 1px solid rgba(0, 76, 167, 0.39);
                }
                &:nth-child(4) {
                  border-left: 1px solid rgba(0, 76, 167, 0.39);
                  border-right: 1px solid rgba(0, 76, 167, 0.39);
                }
              }
            }
          }
        }
      }
      &:nth-child(4) {
        .my-form-item-content {
          > div {
            height: 76px;
            display: inline-block;
            vertical-align: middle;
            padding-top: 23px;
            &:nth-child(1) {
              width: 630px;
              padding-left: 20px;
            }
            &:nth-child(2) {
              width: 240px;
              background: rgba(77, 129, 192, 0.1);
              border-left: 1px solid rgba(0, 76, 167, 0.39);
              border-right: 1px solid rgba(0, 76, 167, 0.39);
              text-align: center;
              font-size: 16px;
              font-weight: bold;
            }
            &:nth-child(3) {
              width: 625px;
              padding-left: 21px;
            }
          }
        }
      }
      &:nth-child(5) {
        .my-form-item-content {
          > div {
            height: 116px;
            display: inline-block;
            vertical-align: middle;
            padding-top: 23px;
            &:nth-child(1) {
              width: 630px;
              padding-left: 21px;
              padding-top: 10px;
            }
            &:nth-child(2) {
              width: 240px;
              background: rgba(77, 129, 192, 0.1);
              border-left: 1px solid rgba(0, 76, 167, 0.39);
              border-right: 1px solid rgba(0, 76, 167, 0.39);
              text-align: center;
              font-size: 16px;
              font-weight: bold;
              padding-top: 45px;
            }
            &:nth-child(3) {
              width: 625px;
              padding-left: 21px;
              padding-top: 42px;
              > span {
                display: inline-block;
                background: #ebe6ff;
                border: 1px solid #5230e9;
                border-radius: 4px;
                font-size: 16px;
                font-weight: 400;
                color: #5230e9;
                padding: 3px 17px;
              }
            }
          }
        }
      }
    }
  }
  .button-group {
    width: 915px;
    margin: 0 auto;
    text-align: center;
    > div {
      display: inline-block;
      font-size: 18px;
      padding: 6px 22px;
      border-radius: 6px;
      &:nth-child(1) {
        color: rgba(81, 174, 246, 1);
        border: 1px solid rgba(81, 174, 246, 1);
        background: rgba(241, 248, 254, 1);
      }
      &:nth-child(2) {
        color: #f31c15;
        border: 1px solid #f31515;
        background: #fff6ef;
        margin: 0 40px;
      }
      &:nth-child(3) {
        color: rgb(250, 57, 57);
        border: 1px solid rgba(250, 83, 57, 1);
        background: rgba(255, 239, 239, 1);
      }
    }
  }
}
</style>
